<template>
    <div class="table">
        <div class="table-row" v-for="(row, index) in tableData" :key="index">
            <template v-for="item in row">
                <fill-in-item :item.sync="item" :key="item.id">
                    <template v-slot:titleName>
                        <span class="control-item-name" :class="{'is_required': item.required}">{{item.name}}{{ item.unitKindName ? `(${item.unitKindName})` : "" }}</span>
                    </template>
                </fill-in-item>
            </template>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import FillInItem from "./item.vue";

@Component({
    components: {
        FillInItem
    }
})
export default class TableContentView extends Vue {
    @Prop({ default: () => { return []; } }) readonly tableData!: any;
}
</script>

<style lang="scss" scoped>
.table {
    border: 1px solid #EBEEF5;
    padding: 10px;
    .table-row {
        border-bottom: 1px solid #EBEEF5;
        &:last-child {
            border-bottom: 0;
        }
        @include flexLayout(flex,normal,normal);
        flex-wrap: wrap;
        ::v-deep {
            .fill-form-item {
                width: 48%;
                .onlyData-span {
                    display: inline-block;
                    margin-left: 8px;
                    img {
                        display: inline-block;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
